<template>
  <div id="audit">
    <el-container>
      <!-- 内容 -->
      <el-main>
        <el-row :gutter="24">
          <el-col :span="6" :offset="2">
            <div class="grid-content bg-purple">
              <el-form ref="form" :model="audit" label-width="100px">
                <el-form-item label="手机号码：">
                  <el-input v-model="audit.shenhe_sjhm" placeholder="请输入电话号码"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6" :offset="1">
            <div class="grid-content bg-purple-light">
              <el-form ref="form" :model="audit" label-width="100px">
                <el-form-item label="状态：" class="drom">
                  <el-select v-model="audit.repair_zt" placeholder="请选择状态">
                    <el-option :label="v" :value="v" v-for="v in ztDate" :key="v">{{v}}</el-option>
                    <!-- <el-option label="区域二" value="beijing"></el-option> -->
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6" :offset="2">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="info" @click="onReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="20" :offset="2">
            <div class="grid-content bg-purple-light">
              <!-- 表格 -->
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="shenhe_id" label="序号" width="120">
                </el-table-column>
                <el-table-column prop="shenhe_sjhm" label="手机号" width="200">
                </el-table-column>
                <el-table-column prop="shenhe_dy" label="楼栋单元号" width="200">
                </el-table-column>
                <el-table-column prop="shenhe_tjsj" label="提交时间" width="220">
                </el-table-column>
                <el-table-column prop="repair_zt" label="状态" width="200">
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                  <template slot-scope="scope">
                    <el-button v-if='scope.row.repair_zt == "未通过"' @click="Modify(scope.row)" type="text">审核</el-button>
                    <el-button v-else disabled type="text">审核</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <!-- 修改弹框 -->
      <el-dialog title="修改" :visible.sync="ModifyVisible" width="30%" :before-close="ModifyClose">
        <div id="drom_up">
          <div>
            <el-main>
              <el-row :gutter="22">
                <el-col :span="10" :offset="1">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="Modifytable" label-width="100px">
                      <el-form-item label="手机号码：">
                        <el-input v-model="Modifytable.shenhe_sjhm" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="单元楼栋：" class="drom">
                        <el-input v-model="Modifytable.shenhe_dy" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="添加时间：">
                        <el-input v-model="Modifytable.shenhe_tjsj" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="状态：">
                        <el-select v-model="Modifytable.repair_zt" placeholder="请选择状态">
                          <el-option :label="v" :value="v" v-for="v in ztDate" :key="v">{{v}}</el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
            </el-main>
          </div>
          <div>
            <el-row :gutter="22">
              <el-col :span="12" :offset="9">
                <div class="grid-content bg-purple">
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="AddVisible">取 消</el-button>
                    <el-button type="primary" @click="ModifySuccessful">确 定</el-button>
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-dialog>
      <!-- 页码 -->
      <el-footer>
        <page class="page"></page>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import page from '../../components/page.vue';
import Event from '../../utils/Event.js';
export default {
  components: { page },
  data() {
    return {
      tableData: [],
      toltable: [],
      ztDate: ['已通过', '未通过'],
      ModifyVisible: false,
      //审核数组
      Modifytable: {
        shenhe_sjhm: '',
        shenhe_dy: '',
        shenhe_tjsj: '',
        repair_zt: '',
      },
      audit: {
        shenhe_sjhm: '',
        repair_zt: '',
      }
    }
  },
  methods: {
    //查询
    onSubmit() {
      for (let j in this.audit) {
        if (this.audit[j].trim()) {
          let arr = this.toltable.filter((i) => {
            return i[j].indexOf(this.audit[j]) != -1
          })
          Event.$emit('noticeData', arr)
        }
      }
    },
    //重置
    onReset() {
      this.audit = {}
      this.getuer()
    },
    AddVisible() {
      this.ModifyVisible = false;
    },
    //修改
    Modify(data) {
      this.ModifyVisible = true
      this.Modifytable = { ...data }
    },
    ModifyClose(data) {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          //当点击关闭时
          if (action == 'confirm') {
            this.ModifyVisible = false;
            // 当点击取消时
          } else if (action == 'cancel') {
            this.ModifyVisible = false;
          }
        },
      });
    },
    // 点击确定修改
    ModifySuccessful() {
      if (this.Modifytable.repair_zt == '未通过') {
        this.ModifyVisible = false
      } else {
        let ModifyArr = [];
        for (let i in this.Modifytable) {
          ModifyArr.push(i, this.Modifytable[i])
        }
        this.$axios({
          url: '/vip/shenheChange',
          method: 'post',
          data: {
            data: ModifyArr,
            sjhm: this.Modifytable.shenhe_sjhm
          }
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.ModifyVisible = false;
            this.getuer();
          }
        })
      }

    },
    getuer() {
      this.$axios({
        url: '/vip/shenheSel',
        method: 'get'
      }).then((res) => {
        Event.$emit('table', res.data.data)
        this.toltable = res.data.data
        this.tableData = this.toltable
      })
    },
    receive() {
      Event.$on('tableData', v => {
        this.tableData = v.tableData
      })
    }
  },
  //挂在后
  created() {
    this.getuer();
  },
  // 数据更新前
  beforeUpdate() {
    this.receive()
  },
}
</script>

<style scoped lang="less">
#audit {
  // background-color: white;
  padding: 50px;
  height: 100%;

  .el-select {
    width: 300px;
  }

  .el-input {
    width: 300px;
  }

  .el-table {
    margin-top: 20px;
  }
}
.page {
  text-align: center;
  margin-top: 30px;
}
</style>